<template>
  <div class="animated fadeIn">
     <Table :columns="memberColumn" :data="memberData"></Table>
     <div class="page">
       <Page :total="totalCount" @on-change="changePage"></Page>
     </div>
  </div>
</template>

<script>
  import fetch from '../../utils/fetch';
  export default {
    data (){
      return{
        memberColumn:[
          {
            title:'会员名称',
            key:'name'
          },
          {
            title:'会员年龄',
            key:'age',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('strong', params.row.age)
              ]);
            }
          },
          {
            title:'手机号',
            key:'mobile'
          },
          {
            title:'邮箱',
            key:'email'
          }
        ],
        memberData:[],
        totalCount: 0
      }
    },
    created(){
      this.handleGetMember(0)
    },
    methods:{
      handleGetMember(currentPage){
        fetch('/api/member/list?page=' + currentPage).then(response =>{
          if(response.data.success) {
            this.memberData = response.data.data.content
            this.totalCount = response.data.data.totalElements
          }
        })
      },
      changePage(page) {
        this.handleGetMember(page-1)
      }
    }
  }
</script>

<style>
    .coninstar{
      width: 50%;
      height: 500px;
      margin: 0 auto;
    }
  .test{
    background: red;
    height: 200px;
    width: 100px;

  }
  .child{
    margin-left: 5px;
    background: gold;
    height: 100px;
    width: 50px;
  }

  .input{
    width: 50px;
  }

  .page{
    margin-top: 30px;
    float: right;
  }
</style>